<template>
  <td
    class="h-1 first:rounded-tl-lg first:rounded-bl-lg last:rounded-tr-lg last:rounded-br-lg last:pr-4"
    :style="{ width: cellConfig['width'] ? `${cellConfig['width']}px` : undefined }"
  >
    <div class="p-4 h-full flex flex-col items-center">
      <div v-if="cellConfig['title']" class="h-4 select-none" style="color: var(--color-neutral-6)">
        {{ cellConfig["title"] }}
      </div>
      <div class="flex flex-1 items-center" :class="cellConfig['title'] ? 'pt-2' : ''">
        <span v-if="cellConfig['dataIndex']" class="text-base">
          {{ get(record, cellConfig["dataIndex"]) }}
        </span>
        <component v-else-if="cellConfig['render']" :is="cellConfig['render'](record)" />
      </div>
    </div>
  </td>
</template>

<script setup lang="ts">
import { get } from "lodash-es";
import { TableColumn } from "../types";

defineProps<{
  cellConfig: TableColumn;
  record: any;
}>();
</script>

<style scoped></style>
